<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 900px;
            height: 450px;
            padding: 20px;
            background-color: pink;
            margin: 20px auto;
            position: relative;
        }

        .wrapper {
            width: 800px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;
            overflow: hidden;
            overflow-y: auto;

        }

        .inner {
            width: 900px;
            height: 800px;
            background-color: blue;
        }

        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            background-color: #f5f5f5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #f5f5f5;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #c8c8c8;
        }

        .left,
        .right {
            position: absolute;
            width: 30px;
            height: 50px;
            background-color: red;

            top: 50%;
            transform: translateY(-50%);
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrapper">
            <div class="left" onclick="fn('left')">&lt;</div>
            <div class="right" onclick="fn('right')">&gt;</div>
            <div class="inner">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!

                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet soluta dolor ipsam cumque? Error sint
                reprehenderit, iste unde eum vitae maxime aut autem minus id blanditiis eveniet obcaecati quos dolorem!

            </div>
        </div>
    </div>
    <script>
        function fn (type) {
            const wrapper = document.querySelector('.wrapper')
            if (type === 'left') {
                wrapper.scrollLeft = 0
            } else {
                wrapper.scrollLeft = 200
            }
        }
    </script>
</body>

</html>